<template>
	<view class="main-page" style="align-items: center;">
		<view class="header-box">
			<text class="font-999-26">ID：{{customerData.id}}</text>
			<view class="column-line"></view>
			<text class="font-999-26">注册时间：{{customerData.createTime}}</text>
		</view>
		<view class="single-box mt-20">
			<text class="font-333-28">姓名</text>
			<input
				v-model="commitParams.realName"
				class="font-333-28 font-weight-600 width-80p"
				placeholder="请输入姓名"
				placeholder-class="font-999-28"
				style="text-align: right;"
			/>
		</view>
		<view class="divider-1"></view>
		<view class="single-box">
			<text class="font-333-28">性别</text>
			<view class="row-container">
				<view class="row-container" @click="commitParams.sex = 1">
					<image :class="{'not-chosen-flag' : commitParams.sex == 0 ,
					 'chosen-flag' : commitParams.sex == 1}"></image>
					<text class="font-333-28 font-weight-600">男</text>
				</view>
				<view class="row-container ml-34" @click="commitParams.sex = 0">
					<image :class="{'not-chosen-flag' : commitParams.sex == 1 , 
					'chosen-flag' : commitParams.sex == 0}"></image>
					<text class="font-333-28 font-weight-600">女</text>
				</view>
			</view>
		</view>
		<view class="divider-1"></view>
		<view class="single-box">
			<text class="font-333-28">电话</text>
			<input
				v-model="commitParams.mobile"
				class="font-333-28 font-weight-600 width-80p"
				placeholder="请输入手机号"
				placeholder-class="font-999-28"
				type="number"
				style="text-align: right;"
			/>
		</view>
		<view class="divider-1"></view>
		<view class="single-box ">
			<text class="font-666-28">生日</text>
			<picker mode="date" v-model="commitParams.brithdayTime"
			 @change="handleChangeBirthday" class="width-80p">
				<view class="row-container-end width-100p" >
					<text class="font-333-28 font-weight-600">{{commitParams.brithdayTime ? commitParams.brithdayTime : '请选择'}}</text>
					<image class="wh-24 ml-4" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</picker>
		</view>
		<view class="divider-20"></view>
		<view class="single-box ">
			<text class="font-666-28">客户来源</text>
			<picker :range="channelList" v-model="commitParams.channelMsg"
			 @change="handleChangeChannel" class="width-80p">
				<view class="row-container-end width-100p" >
					<text class="font-333-28 font-weight-600">{{commitParams.channelMsg ? commitParams.channelMsg : '请选择'}}</text>
					<image class="wh-24 ml-4" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</picker>
		</view>
		<view class="divider-20" v-if="checkBoss == 0"></view>
		<view class="choose-staff-box" @click="clickOpenStaffWindow" v-if="checkBoss == 0">
			<view class="row-container-row-between width-100p">
				<text class="font-666-28">客户归属（可多选）</text>
				<view class="row-container">
					<text class="font-999-28">请选择</text>
					<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</view>
			<view class="row-container-end width-100p" style="flex-wrap: wrap;">
				<view class="chosen-staff-item row-container-center" 
				v-for="(staffItem , staffIndex) in showChosenStaffList"
				:key="staffIndex" @click.stop="handleRemoveChosenStaff(staffItem)">
					<text class="font-333-28 font-weight-600">{{staffItem.userName}}</text>
					<image class="wh-30 ml-15" src="../../static/common/ic_clear.png"></image>
				</view>
			</view>
		</view>
		
		<text class="red-btn mt-40" @click="handleSave">确定修改</text>
		
		<view class="window-main" style="justify-content: flex-end;" v-if="showStaffWindow">
			<view class="staff-window">
				<text class="font-333-36 font-weight-600">客户归属（可多选）</text>
				<view class="staff-list-box">
					<view class="row-container ml-20 mb-20" v-for="(item , index) in allStaffList" :key="index">
						<text class="staff-list-item-chosen" @click="handleRemoveStaff(item)"
						 v-if="chosenStaffList.findIndex((staff) => staff.id == item.id) != -1">{{item.userName}}</text>
						<text class="staff-list-item" v-else @click="handleAddStaff(item)"
						 >{{item.userName}}</text>
					</view>
				</view>
				<view class="row-container-row-between width-100p">
					<text class="staff-cancel" @click="showStaffWindow = false">取消</text>
					<text class="staff-confirm" @click="clickConfirmStaff">确定</text>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkBoss:-1,  //0为店长
				commitParams:{
					customId:'',
					realName:'',
					mobile:'',
					sex:0,
					brithdayTime:'',
					channelMsg:'',
					staffIds:'' , // 选择的员工id
				},
				customerData:{},
				channelList:[] , // 渠道列表
				
				showChosenStaffList:[] , // 显示的已选择的员工  页面上
				chosenStaffList:[] , // 选择的员工列表  弹窗内
				
				showStaffWindow:false , // 选择员工弹窗
				allStaffList:[] ,
			}
		},
		
		onLoad(options) {
			this.checkBoss = this.cookie.get("ap_user_data").checkBoss
			this.commitParams.customId = options.customId
			this.loadCustomerDetail()
			this.loadChannelList()
			this.loadAllEmployee()
		},
		
		methods: {
			loadAllEmployee(){
				let that = this
				this.http({
					url:'/user/staffList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000,
						status:1
					},
					success(res){
						if (res.code == 200){
							that.allStaffList = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			loadCustomerDetail(){
				if (!this.commitParams.customId) return
				let that = this
				this.http({
					url:'/user/custom/findDetail',
					method:'POST',
					data:{
						customId : that.commitParams.customId
					},
					success(res){
						if (res.code == 200){
							that.customerData =  res.data
							that.commitParams.customId = res.data.id
							that.commitParams.mobile = res.data.mobile
							that.commitParams.sex = res.data.sex
							that.commitParams.realName = res.data.realName
							that.commitParams.brithdayTime = res.data.brithdayTime
							that.commitParams.channelMsg = res.data.channelMsg
							
							that.showChosenStaffList = []
							if (res.data.staffList && res.data.staffList.length > 0){
								res.data.staffList.forEach((item)=>{
									let staff = {'id' : item.staffId , 'userName' : item.staffName}
									that.showChosenStaffList.push(staff)
								})
							}
							
						}
					},
					failed(e){
					}
				})
			},
			
			loadChannelList(){
				let that = this
				this.http({
					url:'/common/channelList',
					method:'POST',
					success(res){
						if (res.code == 200){
							that.channelList = res.data
						}
					},
					failed(e){
						
					}
				})
			},
			
			handleSave(){
				if (!this.commitParams.realName){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return
				}
				if (!this.commitParams.mobile){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				
				if (this.showChosenStaffList.length > 0){
					let idArray = []
					this.showChosenStaffList.forEach((item)=>{
						idArray.push(item.id)
					})
					let ids = idArray.join(',')
					this.commitParams.staffIds = ids
				}
				
				let that = this
				this.http({
					url:'/user/custom/saveOrUpdateCustom',
					method:'POST',
					data:this.commitParams,
					success(res){
						if (res.code == 200){
							uni.$emit('refreshClientList')
							uni.navigateBack()
						}
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						},500)
					},
					failed(e){
						
					}
				})
			},
			
			handleChangeBirthday(e){
				this.commitParams.brithdayTime = e.detail.value
			},
			
			handleChangeChannel(e){
				this.commitParams.channelMsg = this.channelList[e.detail.value]
			},
			
			//点击打开选择员工
			clickOpenStaffWindow(){
				this.chosenStaffList = JSON.parse(JSON.stringify(this.showChosenStaffList))
				this.showStaffWindow = true
			},
			
			//移除选择的员工
			handleRemoveChosenStaff(item){
				let index = this.showChosenStaffList.findIndex((staff)=> staff.id == item.id)
				if (index != -1){
					this.showChosenStaffList.splice(index , 1)
				}
			},
			
			//移除选择的员工
			handleRemoveStaff(item){
				let index = this.chosenStaffList.findIndex((staff)=> staff.id == item.id)
				if (index != -1){
					this.chosenStaffList.splice(index , 1)
				}
			},
			
			//添加员工
			handleAddStaff(item){
				let index = this.chosenStaffList.findIndex((staff) => staff.id == item.id)
				if (index == -1){
					this.chosenStaffList.push(item)
				}
			},
			
			//确定添加员工
			clickConfirmStaff(){
				this.showChosenStaffList = JSON.parse(JSON.stringify(this.chosenStaffList))
				this.showStaffWindow = false
			}
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		height: 80rpx;
		padding: 0rpx 30rpx;
		background: white;
		
		.column-line{
			width: 1rpx;
			height: 16rpx;
			background: #999999;
			margin: 0rpx 16rpx;
		}
	}
	
	.single-box{
		width: calc(100% - 60rpx);
		height: 88rpx;
		padding: 0rpx 30rpx;
		background: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		.chosen-flag{
			content: url('../../static/common/ic_chosen_true.png');
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
		
		.not-chosen-flag{
			content: url('../../static/common/ic_chosen_false.png');
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
	
	.choose-staff-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 60rpx);
		padding: 40rpx 30rpx;
		background: white;
		
		.chosen-staff-item{
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-left: 20rpx;
			margin-top: 24rpx;
			padding: 10rpx 20rpx;
		}
	}
	
	.staff-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 40rpx 30rpx;
		background: white;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		
		.staff-list-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: calc(100% - 40rpx);
			flex-wrap: wrap;
			margin: 40rpx 20rpx 80rpx 20rpx;
			
			.staff-list-item{
				background: #F5F5F5;
				border-radius: 10rpx;
				width: 157rpx;
				height: 87rpx;
				text-align: center;
				line-height: 87rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 600;
			}
			
			.staff-list-item-chosen{
				background: #F94C4B;
				border-radius: 10rpx;
				width: 157rpx;
				height: 87rpx;
				text-align: center;
				line-height: 87rpx;
				color: white;
				font-size: 28rpx;
				font-weight: 600;
			}
		}
		
		.staff-cancel{
			background: #F5F5F5;
			border-radius: 10rpx;
			width: 190rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
			margin-left: 30rpx;
			margin-right: 20rpx;
		}
		
		.staff-confirm{
			background: #F94C4B;
			border-radius: 10rpx;
			flex-grow: 1;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
			margin-right: 30rpx;
		}
	}
	
</style>
